<template>
  <div class="z">
    <div class="unfooter" v-if="show">
      <div class="textInput">
        <input type="text" placeholder="写跟帖" @focus="blur" />
      </div>
      <div class="textSpan">
        <span class="iconfont iconpinglun-" @click="pinglun">
          <i class="comment" v-if="comment_length>0">{{comment_length}}</i>
        </span>
        <span class="iconfont iconshoucang red" @click="unshoucang" v-if="has"></span>
        <span class="iconfont iconshoucang" @click="shoucang" v-else></span>
        <span class="iconfont icondianzan red" @click="unlike" v-if="likes">
          <i class="like_length" v-if="like_length>0">{{like_length}}</i>
        </span>
        <span class="iconfont icondianzan" @click="like" v-else>
          <i class="like_length" v-if="like_length>0">{{like_length}}</i>
        </span>
        <span class="iconfont iconfenxiang" @click="showShare = true"></span>
      </div>
    </div>

    <div class="unfooter2" v-else>
      <textarea rows="2" v-model="placeholderText" placeholder="发布评论" @blur="focus" ref="text"></textarea>
      <button @click="Btn">发送</button>
    </div>

    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>

<script>
export default {
  props: ["dataId", "has", 'likes', 'comment_length', 'like_length'],
  data() {
    return {

      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享封面", icon: "poster" },
        { name: "二维码", icon: "qrcode" }
      ],
      show: true,
      placeholderText: "",
      text: "回复:"
    };
  },
  // watch: {

  //   placeholderText() {
  //     // if (!/^@/.test(this.placeholderText)) {
  //     //   this.$refs.text.style.color = ''
  //     // }

  //     if (this.placeholderText == "") {
  //       delete this.dataId.id;
  //       this.placeholderText = "";
  //     }
  //   }
  // },
  methods: {
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    blur() {
      this.show = false;
      this.$nextTick(() => {
        this.$refs.text.focus();
        if (this.dataId.nickname && this.dataId.id) {
          // console.log(123);
          // this.$refs.text.value = this.text + this.dataId.nickname + " ";
          this.$refs.text.placeholder = this.text + this.dataId.nickname
          // this.$refs.text.setForeground(Color.BLUE);
          // this.$refs.text.append("first");

          // this.$refs.text.value = { color: 'red' }
          // this.$refs.text.style.color = 'red'
          // console.log(this.$refs.text.style);
        } else {
          // console.log(123456);
          // console.log(this.dataId.nickname);
          this.$refs.text.placeholder = "发表评论";
        }
      });
    },
    focus() {
      setTimeout(() => {
        if (this.placeholderText == "") {
          delete this.dataId.id;
          this.placeholderText = "";
        }
        this.show = true;
      }, 300);
    },
    Btn() {

      if (!localStorage.getItem('token')) {
        this.$dialog.confirm({
          title: '需要登录才能进行评论',
          message: '是否前往登录',
        })
          .then(() => {
            localStorage.setItem('back', this.$route.path)
            this.$router.push({ name: 'login' })
          })
        return
      }
      let data = { content: this.placeholderText, parent_id: this.dataId.id };

      if (data.parent_id) {
        this.$axios({
          url: "/post_comment/" + this.$route.params.id,
          method: "post",
          data: data
        }).then(res => {
          // console.log(888888888888);
          // console.log(res.data.message);
          // console.log(this.$route.params.id);
          if (res.data.message == "评论发布成功") {
            this.$toast.success('回复评论成功');
            this.$emit("Btn");
            this.$emit("morecomment");
            this.placeholderText = "";
            // console.log(this.dataId.nickname);
          }
        });
      } else {
        this.$axios({
          url: "/post_comment/" + this.$route.params.id,
          method: "post",
          data: {
            content: this.placeholderText
          }
        }).then(res => {
          // console.log(res.data.message);
          // console.log(this.$route.params.id);
          // console.log(777777777777);
          if (res.data.message == "评论发布成功") {
            this.$toast.success('评论发布成功');
            this.placeholderText = "";
            this.$emit("Btn");
            this.$emit("morecomment");
          }
        });
      }
    },
    pinglun() {
      this.$emit('pinglun')
    },
    shoucang() {
      if (!localStorage.getItem('token')) {
        this.$dialog.confirm({
          title: '需要登录才能进行收藏',
          message: '是否前往登录',
        })
          .then(() => {
            localStorage.setItem('back', this.$route.path)
            this.$router.push({ name: 'login' })
          })
        return
      }
      this.$emit("shoucang");
      // console.log(this.has);
    },
    unshoucang() {
      this.$emit("unshoucang");
    },
    like() {
      if (!localStorage.getItem('token')) {
        this.$dialog.confirm({
          title: '需要登录才能进行点赞',
          message: '是否前往登录',
        })
          .then(() => {
            localStorage.setItem('back', this.$route.path)
            this.$router.push({ name: 'login' })
          })
        return
      }
      this.$emit("like");
      // console.log(this.has);
    },
    unlike() {
      this.$emit("unlike");
    }
  }
};
</script>

<style lang="less" scoped>
// textarea {
//   color: yellow;
// }
// ::-moz-placeholder {
//   /* Mozilla Firefox 19+ */
//   color: blue;
// }

// input:-ms-input-placeholder,
// textarea:-ms-input-placeholder {
//   color: yellow;
// }

// input::-webkit-input-value,
// textarea::-webkit-input-value {
//   color: red;
// }

.yellow {
  color: yellow;
}
.red {
  color: red;
  overflow: hidden;
}
.z {
  z-index: 2100;
}
.unfooter {
  display: flex;
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  line-height: 60px;
  position: fixed;
  bottom: 0;
  background: #fff;

  .textInput {
    flex: 1;
    margin-left: 10px;
    input {
      width: 150px;
      height: 30px;
      outline: none;
      border: 1px solid #888;
      line-height: 30px;
      border-radius: 20px;
      background: #eee;
      font-size: 12px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .textSpan {
    margin-right: 5px;
    span {
      flex: 1;
      padding: 0 10px;
      font-size: 7.188vw;
    }
    .iconpinglun-,
    .icondianzan {
      position: relative;
      .comment,
      .like_length {
        font-style: normal;
        top: -2px;
        left: 23px;
        text-align: center;
        position: absolute;
        // top: -3.125vw;
        font-size: 1px;
        background-color: red;
        color: #fff;
        // width: 10px;
        height: 7px;
        padding: 3px;
        line-height: 7px;
        border-radius: 4px;
      }
      .like_length {
        left: 30px;
      }
    }
  }
}
.unfooter2 {
  display: flex;
  width: 100%;
  //   height: 60px;
  border: 1px solid #ccc;
  //   line-height: 60px;
  position: fixed;
  bottom: 0;
  border: none;
  background: #fff;
  align-items: flex-end;
  box-sizing: border-box;
  textarea {
    margin: 10px 0 10px 10px;
    height: 80px;
    flex: 1;
    resize: none;
    border-radius: 10px;
    outline: none;
    border: none;
    background: #eee;
    padding: 15px;
    box-sizing: border-box;
  }
  button {
    margin: 20px;
    width: 60px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    outline: none;
    border: none;
    background-color: red;
    color: #fff;
    font-size: 12px;
  }
}
</style>
